<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="UTF-8">
  <title>Toolbar - Basic</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
  <link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
  <script src="../../../../../scripts/testing/scripts.js"></script>
  <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
  <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script></head>

<body>
  <ion-app>
    <ion-header>
      <ion-toolbar color="primary">
        <ion-title>Toolbar</ion-title>
      </ion-toolbar>

      <ion-toolbar color="primary">
        <ion-buttons slot="secondary">
          <ion-button>
            <ion-icon slot="icon-only" name="person-circle"></ion-icon>
          </ion-button>
          <ion-button>
            <ion-icon slot="icon-only" name="search"></ion-icon>
          </ion-button>
        </ion-buttons>
        <ion-buttons slot="primary">
          <ion-button color="secondary">
            <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
          </ion-button>
        </ion-buttons>
        <ion-title>Subheader</ion-title>
      </ion-toolbar>
    </ion-header>

    <ion-content id="content" fullscreen="true">
      <ion-card color="secondary">
        <ion-card-header>
          Card Header
        </ion-card-header>
        <ion-card-content>
          <ion-card-title>
            Title
          </ion-card-title>
          Some normal text in content.
          <h3>h3 in content</h3>
          <p>
            Paragraph in content.
          </p>
          <p>
            Another paragraph in content.
          </p>
        </ion-card-content>
      </ion-card>

      <ion-card class="rainbow-content">
        <ion-card-header>
          Custom CSS Card Header
        </ion-card-header>
        <ion-card-content>
          <ion-card-title>
            Custom CSS Title
          </ion-card-title>
          Some normal text in content.
          <h3>h3 in content</h3>
          <p>
            Paragraph in content.
          </p>
          <p>
            Another paragraph in content.
          </p>
        </ion-card-content>
      </ion-card>

      <ion-card color="primary">
        <ion-card-header>
          Card Header
        </ion-card-header>
        <ion-card-content>
          <ion-card-title>
            Title
          </ion-card-title>
          Some normal text in content.
          <h3>h3 in content</h3>
          <p>
            Paragraph in content.
          </p>
          <p>
            Another paragraph in content.
          </p>
        </ion-card-content>
      </ion-card>

      <ion-list id="dynamicList">
      </ion-list>

    </ion-content>

    <ion-footer>
      <ion-toolbar>
        <ion-buttons slot="primary">
          <ion-button>
            <ion-icon slot="icon-only" name="search"></ion-icon>
          </ion-button>
        </ion-buttons>
        <ion-searchbar>
        </ion-searchbar>
      </ion-toolbar>

      <ion-toolbar>
        <ion-title>
          Footer
        </ion-title>
      </ion-toolbar>
    </ion-footer>
  </ion-app>

  <style>
    .rainbow-content {
      background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
      color: white;
    }
    .rainbow-content ion-card-header,
    .rainbow-content ion-card-title {
      color: white;
    }
  </style>

  <script>
    let items = [];
    for (var i = 0; i < 30; i++) {
      items.push(i + 1);
    }
    const list = document.getElementById('dynamicList');

    let html = '';
    for (let item of items) {
      html += `<ion-item>${item}</ion-item>`;
    }
    list.innerHTML = html;
  </script>
</body>

</html>
